<template>
    <div class="audio_box">
      <div class="progress_bar">
        <input
          type="range"
          min="0"
          :max="duration"
          v-model="currentTime"
          @input="onDrag"
          @change="onDragEnd"
        />
      </div>
      <div class="player">
        <div class="player_left">
          <div id="box" :class="['photo', { paused: !isRotating }]">
            <img src="http://p1.music.126.net/mhsNHkyFiZMGkIwfR_yxDA==/109951164214045360.jpg?param=34y34" alt="barricades">
          </div>
          <div class="text"><b>竹蜻蜓</b>--石凯</div>
        </div>
        <div class="player_right">
          <div class="player_button" @click="toggleRotation">
            <van-icon v-if="!isRotating" name="play-circle-o" size="35px" />
            <van-icon v-else name="pause-circle-o" size="35px" />
          </div>
          <div class="player_list">
            <van-icon name="bars" size="35px" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  let isRotating = ref(false);
  let isDragging = ref(false);
  let currentTime = ref(0);
  let duration = ref(0);
  let AudioObj = new Audio('/public/石凯 - 竹蜻蜓.mp3');
  
  const updateProgress = () => {
    if (!isDragging.value) {
      currentTime.value = AudioObj.currentTime;
    }
  };
  
  AudioObj.addEventListener('loadedmetadata', () => {
    duration.value = AudioObj.duration;
  });
  
  AudioObj.addEventListener('timeupdate', updateProgress);
  
  function toggleRotation() {
    isRotating.value = !isRotating.value;
    const boxElement = document.getElementById('box');
    if (isRotating.value) {
      boxElement.classList.remove('paused');
      AudioObj.play();
    } else {
      boxElement.classList.add('paused');
      AudioObj.pause();
    }
  }
  
  const onDrag = () => {
    isDragging.value = true;
    AudioObj.pause();
  };
  
  const onDragEnd = () => {
    isDragging.value = false;
    AudioObj.currentTime = currentTime.value;
    if (isRotating.value) {
      AudioObj.play();
    }
  };
  
  onMounted(() => {
    AudioObj.addEventListener('timeupdate', updateProgress);
  });
  
  onUnmounted(() => {
    AudioObj.removeEventListener('timeupdate', updateProgress);
  });
  </script>
  
  <style scoped>
  .audio_box {
    
    border-top: 1px solid #ccc;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 95%;
    background-color: #fff;
  }
  
  .progress_bar {
    margin-top: -22px;
    width: 100%;
    margin-bottom: 5px;
  }
  
  .progress_bar input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #ddd;
    height: 5px;
    border-radius: 5px;
    outline: none;
  }
  
  .progress_bar input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #4caf50;
    cursor: pointer;
  }
  
  .audio_box .player {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .player_left,
  .player_right {
    display: flex;
    align-items: center;
  }
  
  .player_left .photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 0.5s ease;
  }
  
  .player_left .photo img {
    width: 100%;
    height: 100%;
  }
  
  .player_left .text {
    margin-left: 20px;
  }
  
  .player_right .player_button {
    margin-right: 10px;
  }
  
  #box {
    animation: rotateAnimation 2s infinite linear;
  }
  
  @keyframes rotateAnimation {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  #box.paused {
    animation-play-state: paused;
  }
  </style>
